<template>
  <div class="hello">
    <div class="header">
        <img src="/application/banner.png" alt="">
    </div>
    <div class="content clearfix">
        <div class="clearfix telephone" style="border-top: 1px solid #ff6324">
            <div class="telephone-title">
                已申请用户
            </div>
            <div class="telephone-content">
              <div class="telephone-body clearfix go-slide">
                <div class="one-telephone" v-for='item in this.telephoneList'>
                  <div class="" v-for='(value, key) in item'>
                    {{key}} {{value}}
                  </div>
                </div>
              </div>
            </div>
        </div>
        <div class="clearfix" style="margin-bottom: 10px;border-top: 1px solid #f2eeed;border-bottom: 1px solid #f2eeed;">
          <div class="title-content" style="background-color: white">
            <div class="title-line">

            </div>
            <div class="my-card">
              活动说明
            </div>
            <div class="title-line">

            </div>
          </div>
          <div class="article">
            <p>&nbsp&nbsp&nbsp针对成功核卡用户可参与抽取豪华大礼包的活动，每月20日公布上月成功核卡用户的获奖名单，奖品将于次月30日前发放。</p>
            <p>&nbsp&nbsp&nbsp奖品使用方法：可在盘石旗下平台获得对应的广告投放服务，广告投放时间以盘石设定为准。</p>
          </div>
        </div>
        <div class="clearfix" style="margin-bottom: 10px;border-top: 1px solid #f2eeed;border-bottom: 1px solid #f2eeed;">
          <div class="title-content" style="background-color: white">
            <div class="title-line">

            </div>
            <div class="my-card">
              奖项设置
            </div>
            <div class="title-line">

            </div>
          </div>
          <div class="article">
            <p>*&nbsp&nbsp&nbsp一等奖（价值1000元的广告位服务券）：以上月成功核卡人数为准，中奖概率为1%。</p>
            <p>*&nbsp&nbsp&nbsp二等奖（价值500元的广告位服务券）：以上月成功核卡人数为准，中奖概率为2%。</p>
            <p>*&nbsp&nbsp&nbsp三等奖（价值300元的广告位服务券）：以上月成功核卡人数为准，中奖概率为3%。</p>
            <p style="font-size: 11px">注：该活动的最终解释权归浙江盘石信息技术股份有限公司所有</p>
          </div>
        </div>
        <div class="card">
          <img :src="this.usertype !== 'hyjj' ? '/application/baijin.png' : '/application/hyjj.jpg'" alt="">
        </div>
        <div class="btn" @click='gosubmit' style="cursor: pointer">
            立即申请
        </div>
        <div class="title-content">
          <div class="title-line">

          </div>
          <div class="my-card">
            持卡权益
          </div>
          <div class="title-line">

          </div>
        </div>
        <div class="card-detail">
            申请盘石民生联名信用卡，可享受以下权益。<br>
            详情以民生官网活动内容为主。
        </div>
        <table>
          <thead>
              <tr>
                <th style="background: linear-gradient(to left, #e9c6b4, #e2e0e0);">&nbsp</th>
                <th style="background: linear-gradient(to left, #efb496, #e9c6b4);">普卡</th>
                <th style="background: linear-gradient(to left, #f4a277, #efb496);">金卡</th>
                <th style="background: linear-gradient(to left, #fa9059, #f4a277);">标准白金卡</th>
              </tr>
          </thead>
          <tbody>
            <tr v-for='data in dataList'>
              <th v-for='(item, index) in data' v-if='index === 0'>{{item}}</th>
              <th v-else>
                <div class="circle" v-if='item'>

                </div>
              </th>
            </tr>
          </tbody>
        </table>
    </div>
    <div class="footer">
      <div class="footer-title">
        天天民生日特惠
      </div>
      <div class="special">
          <div class="oneday" v-for='item in weeks'>
            {{item}}
          </div>
      </div>
      <div class="time">
        <div class="time-title">
          活动时间：
        </div>
        <div class="time-content">
          2017年5月22日至2018年5月20日
        </div>
        <div class="time-title">
          活动内容：
        </div>
        <div class="time-content">
          持卡人每自然周消费满3笔且每笔满199元（达标交易类型包含计积分交易、微信交易、支付宝交易），即可以7元或7积分享受7天精彩特权，特权仅限消费达标次周领取，每日特权名额有限，先到先得。<br>
注：具体活动细则以民生信用卡官网为准。
        </div>
      </div>
    </div>
    <modal :modalShow='this.modal' :title='"请填写申请信息"' :from='this.usertype' :code='this.code'>

    </modal>
    <modal :modalShow='this.yanzhen' :title='"请输入验证码"'>
      <div slot='body'>
        <div class="point">

        </div>
        <div class="keys">
            企业邀请码
        </div>
        <input type="text" v-model="code" style="width: 8rem;">
        <div class="clearfix" style="padding-right: 2.5rem">
            <a style='text-decoration: none;color: #4d8ceb;float: right;cursor: pointer' @click='register()'>邀请码注册</a>
        </div>
      </div>
      <div slot='button'>
        <div class="btn-info hover" @click='goJump()'>确 定</div>
      </div>
    </modal>
    <modal :modalShow='this.regist' :title='"邀请码申请"'>
      <div slot='body'>
        <div class="input-group">
          <div class="point">

          </div>
          <div class="keys">
            申请对象:
          </div>
          <div style="line-height: 28px;">
            {{this.usertype === "hyjj" ? "诚信认证用户" : "网站联盟用户"}}
          </div>
        </div>
        <div class="input-group">
          <div class="point">

          </div>
          <div class="keys">
            企业名称:
          </div>
          <input type="text" name="" placeholder='请输入企业名称' style='width: 6rem' v-model='registParams.company'>
          <div class="yz-btn"  @click='companyRegister()' :class='companyanzheng ? "" : "tongguo"'>
            <a>{{ companyanzheng ? '验证' : '已通过'}}</a>
          </div>
        </div>
        <div class="input-group">
          <div class="point">

          </div>
          <div class="keys">
            手机号码:
          </div>
          <input type="text" name="" placeholder='请输入手机号码' style='width: 6rem' v-model='registParams.mobile'>
          <div class="yz-btn" @click='telephoneRegister()'  :class='dianhua ? "" : "tongguo"'>
            <a>{{ dianhua ? '验证' : '重发'}}</a>
          </div>
        </div>
        <div class="input-group">
          <div class="point">

          </div>
          <div class="keys">
            验 证 码 :
          </div>
          <input type="text" name="" placeholder='请输入验证码' style='width: 7rem' v-model='registParams.mcode'>
        </div>
      </div>
      <div slot='button'>
        <div class="btn-info hover" @click='yqmhuoqu()'>确 定</div>
      </div>
    </modal>
  </div>
</template>

<script>
import modal from './modal'

export default {
  name: 'hello',
  data () {
    return {
      dataList: [
        ['航空意外险', false, false, true],
        ['私人律师服务', false, true, true],
        ['商旅预订服务', true, true, true],
        ['天天民生日', true, true, true],
        ['全国商户特惠', true, true, true],
        ['保险财产服务', true, true, true],
        ['账户信息即时通', true, true, true],
        ['道路援助', true, true, true]
      ],
      telephoneList: [

      ],
      dianhua: true,
      companyanzheng: true,
      registParams: {
        mobile: '',
        company: '',
        mcode: ''
      },
      code: '',
      modal: {show: false},
      yanzhen: {show: false},
      regist: {show: false},
      usertype: 'hyjj',
      weeks: [
        '周一：咖啡日-7元享COSTA咖啡',
        '周二：甜蜜日-7元享哈根达斯甜品',
        '周三：红包日-7元抢兑500M流量',
        '周四：爱乐日-7积分抢兑QQ音乐付费包',
        '周五：美食日-7积分抢兑大众点评30元美食券',
        '周六：观影日-7积分抢兑大众点评30元观影券',
        '周日：享购日-7积分抢兑我买网满百立减'
      ]
    }
  },
  methods: {
    gosubmit () {
      this.yanzhen.show = true
    },
    GetQueryString (name) {
      var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
      var r = window.location.search.substr(1).match(reg);
      if(r!=null)return  unescape(r[2]); return null;
    },
    goJump () {
      this.$http('post', 'checkCode.html', { code: this.code })
      .then((data) => {
        if (data.code === 1) {
          this.$message({
            type: 'success',
            message: '验证通过',
            showClose: true
          })
          this.yanzhen.show = false
          this.modal.show = true
        } else {
          this.$message({
            type: 'error',
            message: data.result,
            showClose: true
          })
        }
      })
    },
    yqmhuoqu() {
      this.$http('post', 'code.html', this.registParams)
      .then((data) => {
          if (data.code === 1) {
            this.$message({
              type: 'success',
              message: '邀请码已发送到手机',
              showClose: true
            })
            this.regist.show = false
            this.yanzhen.show = true
          } else {
            this.$message({
              type: 'error',
              message: data.result,
              showClose: true
            })
          }
      })
    },
    telephoneRegister() {
      this.$http('post', 'sms.html', { mobile: this.registParams.mobile})
      .then((data) => {
        if (data.code === 1) {
          this.$message({
            type: 'success',
            message: '短信已发送哟亲',
            showClose: true
          })
          this.dianhua = false
        } else {
          this.$message({
            type: 'error',
            message: data.result,
            showClose: true
          })
        }
      })
    },
    companyRegister() {
      this.$http('post', 'check.html', { company: this.registParams.company, from: this.usertype})
      .then((data) => {
        if (data.code === 1) {
          this.$message({
            type: 'success',
            message: '恭喜你所填公司已通过验证~',
            showClose: true
          })
          this.companyanzheng = false
        } else {
          if (data.code === -1) {
            this.$message.error('贵公司非认证公司,请跳转认证')
            setTimeout(function(){
              window.location = data.result
            }, 3000)
          } else {
            this.$message.error(data.result)
          }
        }
      })
    },
    register() {
      this.yanzhen.show = false
      this.regist.show = true
    }
  },
  mounted () {
    this.usertype = this.GetQueryString('from') || 'hyjj'
    this.$http('get', 'list.html', '')
    .then((data) => {
      this.telephoneList = data.result
    })
  },
  components: {
    modal
  }
}
</script>

<style>
.go-slide{
  animation-name: shake-horizontal;
  animation-duration: 120s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-play-state: running;
}
@keyframes shake-horizontal
{
  from {top: 0;}
  to {top: -64rem;}
}
html,body{
  height: 100%;
  margin: 0;
}
.yz-btn{
  width: 3rem;
  display: inline-block;
  color: white;
  background-color: #fa835a;
  cursor: pointer;
  border-radius: 2px;
  padding: .2rem .333333rem;
  font-size: .933333rem;
  text-align: center;
}
.yz-btn.tongguo{
  background-color: #7dc564;
}
.header{
  height: 10.666667rem;
  color: white;
  box-sizing: border-box;
  font-size: 18px;
  text-align: center;
  overflow: hidden;
}
img{
  width: 100%;
  height: 100%;
  transition: all ease 3s;
}
img:hover{
  /*transform: scale(1.05);*/
}
.telephone{
  height: 7.666667rem;
  background-color: white;
  margin-bottom: .666667rem;
  border-bottom: 1px solid #f2eeed;
}
.telephone-title{
  height: 3rem;
  line-height: 3rem;
  text-align: center;
  font-size: 1rem;
}
.telephone-content{
  height: 4.666667rem;
  overflow: hidden;
  position: relative;
}
.telephone-body{
  position: absolute;
  top: 0;
}
.telephone-content .one-telephone{
  float: left;
  width: 50%;
  text-align: center;
  line-height: 2.333333rem;
  color: #999;
}
.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
 }
.content{
  margin-top: .6rem;
  background-color: #f4f4f4;
}
.article{
  float: left;
  padding:0 1.333333rem;
  background-color: white;
}
.article p{
  line-height: 1.666667rem;
  font-size: .866667rem;
  color: #888;
}
.huodong .title{
  font-size: 30px;
}
.card{
  margin-top: 1.8rem;
  margin-left: 2.266667rem;
  width: 12rem;
  height: 7.666667rem;
  background-color: orange;
  float: left;
}
.btn{
  float: left;
  color: white;
  font-size: 14px;
  text-align: center;
  line-height: 2rem;
  margin-top: 4.6rem;
  margin-left: 1.866667rem;
  width: 6.666667rem;
  height: 2rem;
  border-radius: 6.133333rem;
  background: linear-gradient(to left, #fad961, #f76b1c);
}
.title-content{
  float: left;
  padding-top: 1.4rem;
  width: 100%;
}
.title-line{
  float: left;
  margin-left: 3.066667rem;
  width: 6.666667rem;
  height: .133333rem;
  margin-top: .766667rem;
  background-color: #ff6324;
}
.my-card{
  float: left;
  font-weight: bold;
}
.my-card + .title-line{
  margin-left: 0;
}
.my-card{
  padding: 0 .666667rem;
  color: #595959;
}
.card-detail{
  float: left;
  padding-left: 2.666667rem;
  margin-top: .666667rem;
  height: 2.266667rem;
  text-align: center;
  color: #666666;
}
table{
  margin-top: 1.333333rem;
  float: left;
  width: 100%;
  padding: 0 .666667rem;
  border-collapse:collapse;
  color: #666666
}
table thead{
  color: white;
  font-size: 12px;
}
th{
  line-height: 2.666667rem;
  font-weight: normal;
}
tbody tr th {
  border-right: solid 1px #d1d1d1;
  background-color: rgba(201, 201, 201, 0.2);
}
tr th:last-child {
  border: none;
}
tbody tr:nth-child(2n) {
  background-color: rgba(201, 201, 201, 0.6);
}
.circle{
  width: .933333rem;
  height: .933333rem;
  opacity: 0.5;
  background-color: #fa9059;
  margin: 0 auto;
  position: relative;
  border-radius: 50%;
}
.circle:after{
  box-sizing: content-box;
  content: "";
  border: 2px solid #fff;
  border-left: 0;
  border-top: 0;
  height: .4rem;
  left: .266667rem;
  position: absolute;
  top: 2px;
  transform: rotate(45deg);
  width: .2rem;
  transform-origin: center;
}
.footer{
  background-color: #f4f4f4;
  margin-top: .666667rem;
  float: left;
  color: #666666;
  padding: .666667rem 1.533333rem .666667rem 1.133333rem;
}
.footer-title{
  margin: 0 auto;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
}
.special{
  font-size: 12px;
  padding-top: 1.333333rem;
}
.oneday{
  line-height: 2.8rem;
  padding-left: .4rem;
  border-bottom: solid 1px #d5d4d4;
}
.time{
  margin-top: .6rem;
}
.time-title{
  font-size: 14px;
}
.time-title span{
  font-size: 12px;
  color: #999;
}
.time-content + .time-title{
  margin-top: .733333rem;
}
.time-content{
  font-size: 12px;
  line-height: 20px;
  color: #999;
}
</style>
